<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:include="include :: header('修改工程信息')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-project-edit" th:object="${tbProject}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>计算公式</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <img style="width: 100%;height: 100%;" src="/img/cal_pic.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>基础信息</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">工程名称</label>
                                <div class="col-sm-9">
                                    <input name="name" th:field="*{name}" class="form-control" type="text" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">国别</label>
                                <div class="col-sm-9">
                                    <select name="countryType" class="form-control m-b" th:with="type=${@dict.getType('country_list')}" required>
                                        <option value="">请选择</option>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{countryType}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">工程日期</label>
                                <div class="input-daterange input-group">
                                    <input type="text" class="input-sm form-control" id="projectStartDate" th:value="${#dates.format(tbProject.projectStartDate, 'yyyy-MM-dd')}" placeholder="yyyy-MM-dd" name="projectStartDate" required/>
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" id="projectEndDate" th:value="${#dates.format(tbProject.projectEndDate, 'yyyy-MM-dd')}" placeholder="yyyy-MM-dd" name="projectEndDate" required/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>单价信息</h5>
                        </div>
                        <input type="hidden" id="type">
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">中国工人工日单价<span title="<p align='left'>中国工人在国外施工的工日单价。</p>" class="glyphicon glyphicon-info-sign"></span></label>
                                <div class="col-sm-3">
                                    <input onchange="clearResult(this)" name="chineseWorkerUnitPrice" th:field="*{chineseWorkerUnitPrice}" id="chineseWorkerUnitPrice" class="form-control" type="number" required>
                                </div>
                                <div class="col-sm-1">
                                    <div style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="selectPrice(11)">调研数据</div>
                                </div>
                                <div class="col-sm-1">
                                    <div style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="selectPrice(1)">历史数据</div>
                                </div>
                            </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label is-required">货币类型</label>
                            <div class="col-sm-3">
                                <select onchange="clearResult(this)" name="chineseWorkerUnitPriceType" id="chineseWorkerUnitPriceType" class="form-control m-b" th:with="type=${@dict.getType('currency_type')}">
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{chineseWorkerUnitPriceType}"></option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label is-required">对应汇率</label>
                            <div class="col-sm-3">
                                <input th:field="*{chineseExchangeRateAmount}" name="chineseExchangeRateAmount" id="chineseExchangeRateAmount" class="form-control" type="number" onchange="clearResult(this)" required>
                            </div>
                            <div class="col-sm-1">
                                <div id="chineseRateRef" style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="selectRate(1)">引用</div>
                            </div>
                        </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">外国工人工日单价<span title="<p align='left'>外国工人在国外（当地）施工的工日单价。</p>" class="glyphicon glyphicon-info-sign"></span></label>
                                <div class="col-sm-3">
                                    <input onchange="clearResult(this)" name="foreignWorkerUnitPrice" th:field="*{foreignWorkerUnitPrice}" id="foreignWorkerUnitPrice" class="form-control" type="number" required>
                                </div>
                                <div class="col-sm-1">
                                    <div style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="selectPrice(22)">调研数据</div>
                                </div>
                                <div class="col-sm-1">
                                    <div style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="selectPrice(2)">历史数据</div>
                                </div>
                            </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label is-required">货币类型</label>
                            <div class="col-sm-3">
                                <select onchange="clearResult(this)" name="foreignWorkerUnitPriceType" id="foreignWorkerUnitPriceType" class="form-control m-b" th:with="type=${@dict.getType('currency_type')}">
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{foreignWorkerUnitPriceType}"></option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label is-required">对应汇率</label>
                            <div class="col-sm-3">
                                <input th:field="*{foreignExchangeRateAmount}" name="foreignExchangeRateAmount" id="foreignExchangeRateAmount" class="form-control" type="number" onchange="clearResult(this)" required>
                            </div>
                            <div class="col-sm-1">
                                <div id="foreignRateRef" style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="selectRate(2)">引用</div>
                            </div>
                        </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">中外用工比<span title="<p align='left'>同一工程类别（如：建筑工程、装饰工程、安装工程）参与施工的中国工人和外国工人数量之比。</p>" class="glyphicon glyphicon-info-sign"></span></label>
                                <div class="col-sm-1">
                                    <input style="width:80px" name="laborRatioStart" id="laborRatioStart"  class="form-control" type="text" onchange="clearResult(this)" th:field="*{laborRatioStart}" required>
                                </div>
                                <div style="position: absolute;left: 368px;line-height: 28px;">:</div>
                                <div class="col-sm-1">
                                    <input style="width:80px" name="laborRatioEnd" id="laborRatioEnd"  class="form-control" type="text" onchange="clearResult(this)" th:field="*{laborRatioEnd}" required>
                                </div>
                                <div class="col-sm-1">
                                    <div style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="inputAlter(1)">输入提示</div>
                                </div>
                                <label class="col-sm-2 control-label is-required">中外工效比<span title="<p align='left'>同一工程类别（如：建筑工程、装饰工程、安装工程）参与施工的中国工人和外国工人施工效率之比。</p>" class="glyphicon glyphicon-info-sign"></span></label>
                                <div class="col-sm-1">
                                    <input style="width:80px" name="efficiencyRatioStart" id="efficiencyRatioStart" class="form-control" type="text" onchange="clearResult(this)" th:field="*{efficiencyRatioStart}" required>
                                </div>
                                <div style="position: absolute;left: 788px;line-height: 28px;">:</div>
                                <div class="col-sm-1">
                                    <input style="width:80px" name="efficiencyRatioEnd" id="efficiencyRatioEnd" class="form-control" type="text" onchange="clearResult(this)" th:field="*{efficiencyRatioEnd}" required>
                                </div>
                                <div class="col-sm-1">
                                    <div style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="inputAlter(2)">输入提示</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">定额工日单价<span title="<p align='left'>国内定额工日单价，即国内造价管理部门发布的人工信息价，该指标用以计算定额消耗量与实际消耗量比值。</p>" class="glyphicon glyphicon-info-sign"></span></label>
                                <div class="col-sm-8">
                                    <input onchange="clearResult(this)" name="fixedUnitPrice" th:field="*{fixedUnitPrice}" id="fixedUnitPrice" class="form-control" type="number" required>
                                </div>
                                <div class="col-sm-1">
                                    <div style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="selectPrice(3)">引用</div>
                                </div>
                               <!-- <div class="col-sm-4">
                                    <div class="input-group">
                                        <input class="form-control" required type="text" onclick="selectFixedCategoryTree()" id="fixedTreeName" readonly="true" th:value="${category?.name}" >
                                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                    </div>
                                </div>-->
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">实际工日单价<span title="<p align='left'>中国工人在国内的实际工日单价，根据拟建工程各工种工人比例，参考引用单价，自行计算实际工日单价，该指标用以计算定额消耗量与实际消耗量比值。</p>" class="glyphicon glyphicon-info-sign"></span></label>
                                <div class="col-sm-8">
                                    <input onchange="clearResult(this)" name="actualUnitPrice" th:field="*{actualUnitPrice}" id="actualUnitPrice" class="form-control" type="number" required>
                                </div>
                                <div class="col-sm-1">
                                    <div style="height: 32px;line-height:30px;color: #337ab7;cursor: pointer;" onclick="selectPrice(4)">引用</div>
                                </div>
                                <!--<div class="col-sm-4">
                                    <div class="input-group">
                                        <input class="form-control" required type="text" onclick="selectActualCategoryTree()" id="actualTreeName" readonly="true" th:value="${category?.name}" >
                                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                                    </div>
                                </div>-->
                            </div>

                        </div>
                    </div>
                </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>计算结果</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">结算货币类型</label>
                                <div class="col-sm-9">
                                    <select onchange="settleChange(this)" name="settleCurrencyType" id="settleCurrencyType" class="form-control m-b" th:with="type=${@dict.getType('currency_type')}" required>
                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{settleCurrencyType}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">结果</label>
                                <div class="col-sm-9">
                                    <textarea id="result" name="result" class="form-control" readonly required>[[*{result}]]</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12" style="text-align: center">
                                <button type="button" class="btn btn-primary" onclick="calPrice()" style="width: 100px">计算</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" id="hasRate" value="0"/>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "price/project";
        var filePrefix = ctx + 'system/file'
        var monthRatePrefix = ctx + "basic/monthly/rate"
        var types = [[${@dict.getType('currency_type')}]];

        $(function(){
            var data = []
            data.push([[${tbProject.foreignWorkerUnitPriceType}]])
            data.push([[${tbProject.chineseWorkerUnitPriceType}]])
            setSelectOption("foreignWorkerUnitPriceType","settleCurrencyType",data)
            localStorage.setItem("foreignWorkerUnitPriceType",$("#foreignWorkerUnitPriceType").val())
            localStorage.setItem("chineseWorkerUnitPriceType",$("#chineseWorkerUnitPriceType").val())
        });
        $("#form-project-edit").validate({
            onkeyup: false,
            rules:{
                chineseWorkerUnitPrice:{
                    isNumber:true
                },
                foreignWorkerUnitPrice:{
                    isNumber:true
                },
                fixedUnitPrice:{
                    isNumber:true
                },
                actualUnitPrice:{
                    isNumber:true
                },
                laborRatioStart:{
                    isNumber2:true
                },
                laborRatioEnd:{
                    isNumber2:true
                },
                efficiencyRatioStart:{
                    isNumber2:true
                },
                efficiencyRatioEnd:{
                    isNumber2:true
                }
            },
            focusCleanup: true
        });

        function submitHandler(status) {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit?status="+status, $('#form-project-edit').serialize());
            }
        }

        $("#projectStartDate").datetimepicker({
            format: 'yyyy-mm-dd',
            startView: 2,
            minView: 2,
            todayBtn:  true,
            autoclose: true,
            endDate : "2099-12-31",
        }).on('changeDate', function(event) {
            event.preventDefault();
            event.stopPropagation();
            var startTime = event.date;
            $('#projectEndDate').datetimepicker('setStartDate', startTime);
        });

        $("#projectEndDate").datetimepicker({
            format: 'yyyy-mm-dd',
            startView: 2,
            minView: 2,
            todayBtn:  true,
            autoclose: true,
            endDate : "2099-12-31",
        }).on('changeDate', function(event) {
            event.preventDefault();
            event.stopPropagation();
            var endTime = event.date;
            $("#projectStartDate").datetimepicker('setEndDate', endTime);
        });
        $("#rateMonth").datetimepicker({
            format: "yyyy-mm",
            format: "yyyy-mm",
            startView:'year',
            maxView:'year',
            minView:'year',
            autoclose: true
        });
        // 根据当前激活的选项卡获取（方式一）
        function selectPrice(type){
            var currencyType = 0;
            if (type === 1 || type === 11){
                currencyType = $("#chineseWorkerUnitPriceType").val();
            }
            if (type === 2 || type === 22){
                currencyType = $("#foreignWorkerUnitPriceType").val();
            }
            var beginDate = "";
            var endDate = "";
            if(3 === type || 4 === type){
                beginDate = $("#projectStartDate").val()
                endDate = $("#projectEndDate").val()
            }
            $("#type").val(type)
            var options = {
                title: '选择单价',
                url: prefix + "/select?type="+type+"&currencyType="+currencyType+"&beginDate="+beginDate+"&endDate="+endDate,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var rows = layero.find("iframe")[0].contentWindow.getSelections();
            if (rows.length == 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }
            var type = $("#type").val()
            if("1" === type || "11" === type ){
                $('#chineseWorkerUnitPrice').val(rows.price)
                $('#chineseWorkerUnitPriceType').val(rows.currencyType).select2();
                // 从本地缓存中获取中国工人工日单价货币类型的值
                var oldChineseWorkerUnitPriceType = localStorage.getItem("chineseWorkerUnitPriceType")
                if(rows.currencyType != oldChineseWorkerUnitPriceType){
                    $("#chineseExchangeRateAmount").val("")
                }
                localStorage.setItem("chineseWorkerUnitPriceType",rows.currencyType)
            }
            if("2" === type || "22" === type ){
                $('#foreignWorkerUnitPrice').val(rows.price)
                $('#foreignWorkerUnitPriceType').val(rows.currencyType).select2();
                // 从本地缓存中获取外国工人工日单价货币类型的值
                var oldForeignWorkerUnitPriceType = localStorage.getItem("foreignWorkerUnitPriceType")
                if(rows.currencyType != oldForeignWorkerUnitPriceType){
                    $("#foreignExchangeRateAmount").val("")
                }
                localStorage.setItem("foreignWorkerUnitPriceType",rows.currencyType)
            }
           /* if("3" === type ){
                $('#fixedUnitPrice').val(rows.price)
            }
            if("4" === type ){
                $('#actualUnitPrice').val(rows.price)
            }*/
            $.modal.close(index);
        }

        function selectRate(type){
            $("#rateType").val(type)
            var currencyType = type === 1 ? $("#chineseWorkerUnitPriceType").val() : $("#foreignWorkerUnitPriceType").val()
            var options = {
                title: '查看汇率',
                url: prefix + "/select?type=5&currencyType="+currencyType,
                callBack: doSubmit2
            };
            $.modal.openOptions(options);
        }

        function doSubmit2(index, layero){
            var rows = layero.find("iframe")[0].contentWindow.getSelections();
            if (rows.length == 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }
            var type = $("#rateType").val()
            if(type == 1){
                $("#chineseExchangeRateAmount").val(rows.price)
            }else{
                $("#foreignExchangeRateAmount").val(rows.price)
            }

            $.modal.close(index);
        }

        function clearResult(tis){
            $("#result").val("")
            // 中国工人工日单价货币类型和外国工人工日单价货币类型的当前值
            var foreignWorkerUnitPriceType = $("#foreignWorkerUnitPriceType").val()
            var chineseWorkerUnitPriceType = $("#chineseWorkerUnitPriceType").val()

            // 从本地缓存中获取中国工人工日单价货币类型和外国工人工日单价货币类型的值
            var oldForeignWorkerUnitPriceType = localStorage.getItem("foreignWorkerUnitPriceType")
            var oldChineseWorkerUnitPriceType = localStorage.getItem("chineseWorkerUnitPriceType")

            var selectId = $(tis).attr("id")
            // 外国工人工日单价货币类型与上一次的值比较，不一致则清空汇率
            if(selectId == "foreignWorkerUnitPriceType" && foreignWorkerUnitPriceType != oldChineseWorkerUnitPriceType){
                $("#foreignExchangeRateAmount").val("")
            }
            // 中国工人工日单价货币类型与上一次的值比较，不一致则清空汇率
            if(selectId == "chineseWorkerUnitPriceType" && chineseWorkerUnitPriceType != oldChineseWorkerUnitPriceType){
                $("#chineseExchangeRateAmount").val("")
            }

            // 存储中国工人工日单价货币类型和外国工人工日单价货币类型的当前值到本地缓存
            localStorage.setItem("foreignWorkerUnitPriceType",foreignWorkerUnitPriceType)
            localStorage.setItem("chineseWorkerUnitPriceType",chineseWorkerUnitPriceType)

            setSelectOption("foreignWorkerUnitPriceType","settleCurrencyType",[foreignWorkerUnitPriceType,chineseWorkerUnitPriceType])
            return;
        }


        function setSelectOption (dataSelectId,targetSelectId,currencyTypes){
            var select = document.getElementById(dataSelectId)
            var data = []
            for(var i = 0;i < select.options.length;i++){
                if(select.options[i].value == "CNY" || currencyTypes.includes(select.options[i].value)){
                    var obj = {id: select.options[i].value, text: select.options[i].text}
                    data.push(obj);
                }
            }

            $("#"+targetSelectId).empty()
            $("#"+targetSelectId).select2({ data: data})
        }

        function settleChange(tis){
            $("#result").val("")
            $("#settleCurrencyType").val($(tis).val()).select2()
        }

        function calPrice(){
            if(!$("#chineseWorkerUnitPrice").val()){
                $.modal.alertWarning("中国工人工日单价不能为空");
                return;
            }
            if(!$("#chineseWorkerUnitPriceType").val()){
                $.modal.alertWarning("中国工人工日货币类型不能为空");
                return;
            }
            if(!$("#foreignWorkerUnitPrice").val()){
                $.modal.alertWarning("外国工人工日单价不能为空");
                return;
            }
            if(!$("#foreignWorkerUnitPriceType").val()){
                $.modal.alertWarning("外国工人工日货币类型不能为空");
                return;
            }
            if(!$("#laborRatioStart").val()){
                $.modal.alertWarning("中外用工比分子不能为空");
                return;
            }
            if(!$("#laborRatioEnd").val()){
                $.modal.alertWarning("中外用工比分母不能为空");
                return;
            }
            if(!$("#efficiencyRatioStart").val()){
                $.modal.alertWarning("中外工效比分子不能为空");
                return;
            }
            if(!$("#efficiencyRatioEnd").val()){
                $.modal.alertWarning("中外工效比分母不能为空");
                return;
            }
            if(!$("#fixedUnitPrice").val()){
                $.modal.alertWarning("定额工日单价不能为空");
                return;
            }
            if(!$("#actualUnitPrice").val()){
                $.modal.alertWarning("实际工日单价不能为空");
                return;
            }

            var config = {
                url: prefix + "/cal",
                type: "post",
                dataType: "json",
                data: $('#form-project-edit').serialize(),
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍候...");
                    $.modal.disable();
                },
                success: function(result) {
                    $("#result").val(result.msg);
                    $.modal.closeLoading();
                }
            };
            $.ajax(config)
        }
        $(".glyphicon-info-sign").tooltip({
            trigger:'hover',
            html:true,
            placement:'auto top',
            container:'body'
        });
        // 输入提示
        function inputAlter(type) {
            $.modal.openOptions({
                url: prefix + "/inputAlter?type="+type,
                title: "输入提示",
                btn: ['关闭'],
                yes: function (index) {
                    $.modal.close(index);
                },
            });
        }
    </script>
</body>
<style>
    .tooltip-inner{
        background: #f7ecb5 !important; /*修改背景色*/
        text-align: left !important;/*字体左对齐*/
        color:black !important;/*字体颜色*/
        font-family: "仿宋" !important;
        font-weight: bold !important;
    }
    .tooltip-arrow{
        border-bottom-color: #f7ecb5 !important;//修改三角形的颜色
        opacity: 0;//三角形透明
    }
    .tooltip{
        opacity: 1 !important;//让整个tooltip不透明
    }
</style>
</html>